<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册-个人用户</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <script type="text/javascript" src="js/jquery-3.0.0-beta.js" ></script>
	<style>
		body {
			font-family: Arial, "宋体", Lucida, Verdana, Helvetica, sans-serif;
			font-size: 12px;
			color: #333;
			line-height: 150%;
			background: #f2f2f2;
		}

		.hide{display:none;}

		.focus,.error {
			color: #e4393c;
			line-height: 36px;
			height: 36px;
			position: absolute;
			top: 0px;

			width: 260px;
			padding: 0 5px;
			background: #FFEBEB;
			border: 1px solid #ffbdbe;
		}

		.error span,.focus span {
			padding: 5px 0;
			line-height: 13px;
			display: block;
		}

		.focus {
			color: #666;
			width: 260px;;
			line-height: 36px;
			background: #f7f7f7;
			border: 1px solid #dddddd;
		}

		.regist {
			width: 990px;
			padding: 0;
			margin: 0 auto;
			zoom: 1;
		}


		.mc {
			padding: 30px 0 20px;
			border: solid #dddddd; border-width : 0px 1px 1px;
			background: #FFF;
			overflow: hidden;
			zoom: 1;
			border-width: 0px 1px 1px;
		}

		.form {
			float: left;
			width: 750px;
			font-size: 12px;
		}

		.form label,.form input,.form select,.form textarea,.form button,.form .label {
			float: left;
			font-size: 12px;
		}

		.item {
			padding-top: 9px;
			height: 60px;
			line-height: 34px;
			position: relative;
			z-index: 1;
		}

		.label {
			float: left;
			width: 190px;
			text-align: right;
			font-size: 14px;
			color: #999;
			padding-right: 10px;
		}

		.input {
			float: left;
			position: relative;
			width: 270px;
			overflow: visible;
		}

		.text {
			float: none;
			width: 275px;
			height: 37px;
			line-height: 32px;
			border: 1px solid #cccccc;
			font-size: 14px;
			font-family: arial, "宋体";
			overflow: hidden;
		}

	</style>
</head>
<body>
    <div class="regist"> 
        <div class="mc">
            <form id="personRegForm" class="form" action="login.html" method="POST" onsubmit="return validateForm();">
                <div class="item">
                    <span class="label">用户名：</span>
                    <div class="input">
                        <input type="text" id="username" name="username" class="text">
                       
                        <label id="username_msg" class="hide"></label>
                    </div>
                </div>
                <div class="item">
                    <span class="label">请设置密码：</span>
                    <div class="input">
                        <input type="password" id="password" name="password" class="text">
                        
                        <label id="pwd_msg" class="hide"></label>
                    </div>
                </div>
                <div class="item">
                    <span class="label">请确认密码：</span>
                    <div class="input">
                        <input type="password" id="pwdRepeat" name="pwdRepeat" class="text">
                       
                        <label id="pwdRepeat_msg" class="hide"></label>
                    </div>
                </div>
                <div class="item">
                    <span class="label">验证邮箱：</span>
                    <div class="input">
                        <input type="text" id="mail" name="mail" class="text">
                        
                        <label id="mail_msg" class="hide"></label>
                    </div>
                </div>
                <div class="item">
                    <span class="label">&nbsp;</span>
                    <input type="submit" class="btn-img" id="registsubmit" value="立即注册" />
                </div>
            </form>
        </div>   
    </div>


	 <script>
		window.onload = function(){
	// 1. 用户名
	$("#username").focus(function(){
		/* 获取焦点
		var username_msg = $("#username_msg");
		username_msg.text("4-20位字符，支持英文、数字及'-'、'_'组合");
		username_msg.attr("class","focus");
		*/
		elemFocus("username_msg","4-20位字符，支持英文、数字及'-'、'_'组合");

	}).blur(userValidator);
	// 2. 密码
	$("#password").focus(function(){
		elemFocus("pwd_msg","6-20位字符，可使用字母、数字的组合");
	}).blur(pwdValidator);
	// 3. 确认密码
	$("#pwdRepeat").focus(function(){
		elemFocus("pwdRepeat_msg","6-20位字符，可使用字母、数字的组合");
	}).blur(pwdRepeatValidator);
	// 4. Email
	$("#mail").focus(function(){
		elemFocus("mail_msg","完成验证后，可以使用该邮箱登录和找回密码");
	}).blur(emailValidator);
}

// 定义函数 - 通用的信息提示
function elemFocus(eleId,text){
	var ele_msg = $("#"+eleId);
	ele_msg.text(text);
	ele_msg.attr("class","focus");
}

// 定义验证用户名的函数
function userValidator(){
	// 获取用户名输入的值
	var value = $("#username").val();
	// 获取用于显示提示信息的元素
	var username_msg = $("#username_msg");
	// 验证逻辑
	if(value==""||value==null){
		username_msg.text("用户名不能为空");
		username_msg.attr("class","error");
		return false;
	}else if(value.length<4||value.length>20){
		username_msg.text("用户名的长度不正确");
		username_msg.attr("class","error");
		return false;
	}else if(!/^[a-zA-Z0-9-_]{4,20}$/.test(value)){
		username_msg.text("用户名输入不正确");
		username_msg.attr("class","error");
		return false;
	}
	// 验证通过修改正确样式
	if(!username_msg.hasClass("hide")){
		username_msg.text("");
		username_msg.attr("class","hide");
	}
	return true;
}
// 定义验证密码的函数
function pwdValidator(){
	var value = $("#password").val();
	var pwd_msg = $("#pwd_msg");
	if(value==""||value==null){
		pwd_msg.text("密码不能为空");
		pwd_msg.attr("class","error");
		return false;
	}else if(value.length<6||value.length>20){
		pwd_msg.text("密码的长度不正确");
		pwd_msg.attr("class","error");
		return false;
	}else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
		pwd_msg.text("密码输入不正确");
		pwd_msg.attr("class","error");
		return false;
	}
	if(!pwd_msg.hasClass("hide")){
		pwd_msg.text("");
		pwd_msg.attr("class","hide");
	}
	return true;
}
// 定义确认密码验证的函数
function pwdRepeatValidator(){
	var value = $("#pwdRepeat").val();
	var pwdRepeat_msg = $("#pwdRepeat_msg");
	var pwd = $("#password").val();
	if(value==""||value==null){
		pwdRepeat_msg.text("密码不能为空");
		pwdRepeat_msg.attr("class","error");
		return false;
	}else if(value.length<6||value.length>20){
		pwdRepeat_msg.text("密码的长度不正确");
		pwdRepeat_msg.attr("class","error");
		return false;
	}else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
		pwdRepeat_msg.text("密码输入不正确");
		pwdRepeat_msg.attr("class","error");
		return false;
	}else if(value != pwd){
		pwdRepeat_msg.text("两次密码输入不一致");
		pwdRepeat_msg.attr("class","error");
		return false;
	}
	if(!pwdRepeat_msg.hasClass("hide")){
		pwdRepeat_msg.text("");
		pwdRepeat_msg.attr("class","hide");
	}
	return true;
}
// 定义Email验证的函数
function emailValidator(){
	var value = $("#mail").val();
	var email_msg = $("#mail_msg");
	if(value==""||value==null){
		email_msg.text("Email不能为空");
		email_msg.attr("class","error");
		return false;
	}else if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)){
		email_msg.text("Email格式不正确");
		email_msg.attr("class","error");
		return false;
	}
	if(!email_msg.hasClass("hide")){
		email_msg.text("");
		email_msg.attr("class","hide");
	}
	return true;
}
function validateForm(){
	if(!userValidator()||!pwdValidator()||!pwdRepeatValidator()||!emailValidator()){
		return false;
	}
	return true;
}
	</script>
</body>
</html>